.folding-container {
    position: relative;
    .folding-button {
        padding: 4px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        box-shadow: 0 0 6px rgba(0, 0, 0, .35);
        background-color: white;
        cursor: pointer;
        .folding-button-inner {
            overflow: hidden;
            width: 100%;
            height: 100%;
            border-radius: 100%;
            text-align: center;
            line-height: 32px;
            img {
                width: 100%;
                height: 100%;
            }
            i {
                font-size: 22px;
                line-height: 32px;
                color: #108ee9;
            }
        }
    }
    .folding-content {
        position: absolute;
        right: 100%;
        margin-right: 15px;
        box-shadow: 0 0 6px rgba(0, 0, 0, .35);
        background-color: white;
        transform-origin: right center;
        transition: all .1s;
        opacity: 0;
        &.collapse {
            transform: translateX(20px);
            transform: scale(0);
            opacity: 0;
        }
        &.visible {
            transform: translateX(0);
            transform: scale(1);
            opacity: 1;
        }
        &.folding-content-rectangle,
        &.folding-content-rectangle .folding-content-inner {
            border-radius: 4px;
        }
        &.folding-content-ellipse,
        &.folding-content-ellipse .folding-content-inner {
            height: 40px;
            border-radius: 20px;
        }
        .folding-content-arrow{
            position: absolute;
            top: 0;
            right: -3px;
            z-index: 0;
            margin-top: -5px;
            display: block;
            width: 10px;
            height: 10px;
            box-shadow: 0 0 6px rgba(0, 0, 0, .35);
            background-color: white;
            transform-origin: center center;
            transform: rotate(45deg);
        }
        .folding-content-inner {
            position: relative;
            z-index: 1;
            background-color: white;
        }
    }
}

.folding-container-active {
    .folding-button {
        background-color: #108ee9;
        .folding-button-inner {
            i {
                color: white;
            }
        }
    }
}